<template>
  <div class="app-container">
    <el-form v-show="showSearch" :inline="true" :model="form" class="demo-form-inline">
      <el-form-item label="设备编号：">
        <el-input
          v-model.trim="form.machineId"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="收款方账号：">
        <el-input
          v-model.trim="form.accountNumber"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="订单编号：">
        <el-input v-model.trim="form.orderSn" placeholder="请输入" clearable style="width: 240px" />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="reset()">重置</el-button>
        <el-button type="primary" @click="handleQuery()">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" justify="end">
      <el-button type="primary" @click="handleExport()">批量导出筛选数据</el-button>
    </el-row>

    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :default-expand-all="default_expand" :data="list">
      <el-table-column label="设备编号" align="center" prop="machineId" />
      <el-table-column label="订单编号" align="center" prop="orderSn" />
      <el-table-column label="交易金额" align="center" prop="payMoney" width="160">
        <template #default="{ row }">
          <el-tooltip v-if="row.payType === 3">
            <template #content>
              <span> 储值金额： {{ row.payMoney }}</span
              ><br />
              <span> 赠送消费金： {{ row.giftGold || 0 }}</span>
            </template>
            <el-button type="primary" link>
              {{ additionOperation(+row.payMoney, +row.giftGold) }}</el-button
            >
          </el-tooltip>
          <span v-else> {{ row.payMoney.toFixed(2) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="分账比例" align="center" prop="proportion" />
      <el-table-column label="交易手续费" align="center" prop="feeRate" />
      <el-table-column label="交易时间" align="center" prop="payTime" />
      <el-table-column label="分账金额" align="center" prop="money" width="160" />
      <el-table-column label="当前待结算资金" align="center" prop="allFreezeMoney" width="160" />
      <el-table-column label="可提现金额" align="center" prop="canWithdrawMoney" width="160" />
      <el-table-column
        label="收款方名字&账号"
        align="center"
        prop="createTime"
        width="160"
        type="expand"
      >
        <template #default="props">
          <el-table :data="props.row.positionSharingList.length && props.row.positionSharingList">
            <el-table-column label="类型" align="center" prop="type" />
            <el-table-column label="收款方名字" align="center" prop="nickName" />
            <el-table-column label="收款方账号" align="center" prop="accountNumber" />
            <el-table-column label="结算周期" align="center" prop="freezeDay" />
            <el-table-column label="分账比例" align="center" prop="proportion" />
          </el-table>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList()"
    />
  </div>
</template>

<script setup>
import { getAccountOrderApi } from '@/api/fund/accountDetails'
import { parseTime } from '@/utils/tools'
import { additionOperation } from '@/utils/tools'

const { proxy } = getCurrentInstance()
const { default_expand_all } = proxy.useDict('default_expand_all')
const default_expand = computed(() => +default_expand_all.value[0]?.value)
const list = ref([])
const creatorTypeOptions = ref([
  { label: `创客-特约商户`, value: 1 },
  { label: `创客-普通商户`, value: 2 },
  { label: `创客-个人`, value: 3 },
  { label: `创客-服务商`, value: 4 }
])
const showSearch = ref(true)
const form = ref({
  machineId: '',
  accountNumber: '',
  orderSn: ''
})
const loading = ref(false)
const total = ref(0)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})
const route = useRoute()
console.log(route.query)
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/**重置数据页码为 0  */
function reset() {
  form.value.machineId = ''
  form.value.accountNumber = ''
  form.value.orderSn = ''
  queryParams.value.pageNum = 1
  queryParams.value.pageSize = 10
  getList()
}
/** 导出 */
function handleExport() {
  proxy.download(
    '/operation/accountfde/bghighuie',
    { ...form.value },
    `分账详情列表（订单）${new Date().getTime()}.xlsx`
  )
}
/**获取账单数据 */
function getList() {
  loading.value = true
  getAccountOrderApi({ ...form.value, ...queryParams.value }).then((res) => {
    loading.value = false
    if (res.data && res.data.rows) {
      total.value = res.data.total
      list.value = res.data.rows.map((item) => {
        return {
          ...item,
          payTime: parseTime(item.payTime),
          feeRate: item.feeRate + '%',
          proportion: item.proportion ? item.proportion + '%' : '',
          positionSharingList: item.positionSharingList.map((ev) => {
            return {
              ...ev,
              proportion: ev.proportion + '%',
              type: creatorTypeOptions.value.find((item) => ev.type == item.value).label,
              freezeDay: ev.freezeDay ? 'T+' + ev.freezeDay : ''
            }
          })
        }
      })
    }
  })
}
onMounted(() => {
  // 获取传过来的值
  form.value.machineId = route.query.id
  getList()
})
</script>

<style lang="scss">
.el-input {
  width: 215px;
}
</style>
